import {reactive, ref, watch} from "vue";
import echartsUtil from "@/commons/utils/echartsUtil";
import http from "@/commons/utils/httpUtil";
import NumberUtil from "@/commons/utils/numberUtil";

export default function useBarLineChartOption(filterOption, myChart, type) {
    const myChartOption = ref({})

    const option = ref({})

    const dbData = reactive({});

    const getXLabel = (type, item) => {
        switch (type) {
            case 'year': return item.year + '年';
            case 'quarter': return item.quarter + '季';
            case 'month': return item.month + '月';
        }
    }

    const getLegendData = (type, name) => {
        switch (type) {
            case 'year': return name + '本年';
            case 'quarter': return name + '本季';
            case 'month': return name + '本月';
        }
    }

    const getRankingLegendData = (portName) => {
        return filterOption.value.statsType === '累计' ? (portName + '累计') : (getLegendData(filterOption.value.type, portName))
    }

    const setRankingYearOptionValue = (portName)=>{
        option.value = {
            // titleText: '深圳港当年月集装箱吞吐量',
            // subText: '占比峰值出现在6月',
            legendData: [portName + '累计', '深圳累计', portName + '增速', '深圳增速'],
            xAxisData: dbData.value.map(item => getXLabel(filterOption.value.type, item)),
            yAxisName: ['吞吐量(万TEU)', '增速'],
            seriesType: ['bar', 'bar', 'line', 'line'],
            yAxisIndex: [0, 0, 1, 1],
            itemStyle: [
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#198BFC', '#33EEFF'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#C8B238', '#FFE34D'),
                {normal: {color: '#33EEFFFF'}},
                {normal: {color: '#FFE34DFF'}}
            ],
            seriesData: [
                dbData.value.map(item => NumberUtil.toFixed(item.childCumThr, 2)),
                dbData.value.map(item => NumberUtil.toFixed(item.parentCumThr, 2)),
                dbData.value.map(item => NumberUtil.toFixed(item.childCumGrowth, 2)),
                dbData.value.map(item => NumberUtil.toFixed(item.parentCumGrowth, 2)),
            ]
        }
    }

    const setRankingQuarterOptionValue = (portName)=>{
        option.value = {
            // // titleText: '深圳港当年月集装箱吞吐量',
            // // subText: '占比峰值出现在6月',
            // legendData: [getRankingLegendData(portName), getRankingLegendData('深圳'), getRankingLegendData(portName) + '增速',  getRankingLegendData('深圳') + '增速'],
            // xAxisData: dbData.value.map(item => getXLabel(filterOption.value.type, item)),
            // yAxisName: ['吞吐量(万TEU)', '增速'],
            // seriesType: ['bar', 'bar', 'bar', 'bar', 'line', 'line', 'line', 'line'],
            // yAxisIndex: [0, 0, 0, 0, 1, 1, 1, 1],
            // itemStyle: [
            //     echartsUtil.getLinearGradient(0, 0, 0, 1, '#198BFC', '#33EEFF'),
            //     echartsUtil.getLinearGradient(0, 0, 0, 1, '#C8B238', '#FFE34D'),
            //     echartsUtil.getLinearGradient(0, 0, 0, 1, '#578804', '#baf318'),
            //     echartsUtil.getLinearGradient(0, 0, 0, 1, '#7e6c08', '#e1d074'),
            //     {normal: {color: '#33EEFF'}},
            //     {normal: {color: '#FFE34D'}},
            //     {normal: {color: '#baf318'}},
            //     {normal: {color: '#e1d074'}},
            // ],
            // seriesData: [
            //     dbData.value.map(item => NumberUtil.toFixed(item.childCumThr, 2)),
            //     dbData.value.map(item => NumberUtil.toFixed(item.parentCumThr, 2)),
            //     dbData.value.map(item => NumberUtil.toFixed(item.childThr, 2)),
            //     dbData.value.map(item => NumberUtil.toFixed(item.parentThr, 2)),
            //     dbData.value.map(item => NumberUtil.toFixed(item.childCumGrowth, 2)),
            //     dbData.value.map(item => NumberUtil.toFixed(item.parentCumGrowth, 2)),
            //     dbData.value.map(item => NumberUtil.toFixed(item.childGrowth, 2)),
            //     dbData.value.map(item => NumberUtil.toFixed(item.parentGrowth, 2)),
            // ]

            // titleText: '深圳港当年月集装箱吞吐量',
            // subText: '占比峰值出现在6月',
            legendData: [getRankingLegendData(portName), getRankingLegendData('深圳'), getRankingLegendData(portName) + '增速',  getRankingLegendData('深圳') + '增速'],
            xAxisData: dbData.value.map(item => getXLabel(filterOption.value.type, item)),
            yAxisName: ['吞吐量(万TEU)', '增速'],
            seriesType: ['bar', 'bar', 'line', 'line'],
            yAxisIndex: [0, 0, 1, 1],
            itemStyle: [
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#198BFC', '#33EEFF'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#C8B238', '#FFE34D'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#578804', '#baf318'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#7e6c08', '#e1d074'),
                {normal: {color: '#33EEFF'}},
                {normal: {color: '#FFE34D'}},
                {normal: {color: '#baf318'}},
                {normal: {color: '#e1d074'}},
            ],
            seriesData: [
                // dbData.value.map(item => NumberUtil.toFixed(item.childCumThr, 2)),
                // dbData.value.map(item => NumberUtil.toFixed(item.parentCumThr, 2)),
                // dbData.value.map(item => NumberUtil.toFixed(item.childThr, 2)),
                // dbData.value.map(item => NumberUtil.toFixed(item.parentThr, 2)),
                // dbData.value.map(item => NumberUtil.toFixed(item.childCumGrowth, 2)),
                // dbData.value.map(item => NumberUtil.toFixed(item.parentCumGrowth, 2)),
                // dbData.value.map(item => NumberUtil.toFixed(item.childGrowth, 2)),
                // dbData.value.map(item => NumberUtil.toFixed(item.parentGrowth, 2)),

                dbData.value.map(item => NumberUtil.toFixed(item['child' + nsDict[filterOption.value.statsType] + 'Thr'], 2)),
                dbData.value.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.value.statsType] + 'Thr'], 2)),
                dbData.value.map(item => NumberUtil.toFixed(item['child' + nsDict[filterOption.value.statsType] + 'Growth'], 2)),
                dbData.value.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.value.statsType] + 'Growth'], 2)),
            ]
        }
    }

    const setRankingMonthOptionValue = (portName)=>{
        option.value = {
            // titleText: '深圳港当年月集装箱吞吐量',
            // subText: '占比峰值出现在6月',
            legendData: [getRankingLegendData(portName), getRankingLegendData('深圳'), getRankingLegendData(portName) + '增速',  getRankingLegendData('深圳') + '增速'],
            xAxisData: dbData.value.map(item => getXLabel(filterOption.value.type, item)),
            yAxisName: ['吞吐量(万TEU)', '增速'],
            seriesType: ['bar', 'bar', 'line', 'line'],
            yAxisIndex: [0, 0, 1, 1],
            itemStyle: [
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#198BFC', '#33EEFF'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#C8B238', '#FFE34D'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#578804', '#baf318'),
                echartsUtil.getLinearGradient(0, 0, 0, 1, '#7e6c08', '#e1d074'),
                {normal: {color: '#33EEFF'}},
                {normal: {color: '#FFE34D'}},
                {normal: {color: '#baf318'}},
                {normal: {color: '#e1d074'}},
            ],
            seriesData: [
                // dbData.value.map(item => NumberUtil.toFixed(item.childCumThr, 2)),
                // dbData.value.map(item => NumberUtil.toFixed(item.parentCumThr, 2)),
                // dbData.value.map(item => NumberUtil.toFixed(item.childThr, 2)),
                // dbData.value.map(item => NumberUtil.toFixed(item.parentThr, 2)),
                // dbData.value.map(item => NumberUtil.toFixed(item.childCumGrowth, 2)),
                // dbData.value.map(item => NumberUtil.toFixed(item.parentCumGrowth, 2)),
                // dbData.value.map(item => NumberUtil.toFixed(item.childGrowth, 2)),
                // dbData.value.map(item => NumberUtil.toFixed(item.parentGrowth, 2)),

                dbData.value.map(item => NumberUtil.toFixed(item['child' + nsDict[filterOption.value.statsType] + 'Thr'], 2)),
                dbData.value.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.value.statsType] + 'Thr'], 2)),
                dbData.value.map(item => NumberUtil.toFixed(item['child' + nsDict[filterOption.value.statsType] + 'Growth'], 2)),
                dbData.value.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.value.statsType] + 'Growth'], 2)),
            ]
        }
    }

    // 后台数据查询
    const queryNsCumThrData = async () => {
        // await http.get('/large/queryNsCumThrMonthRecordByYear/' + filterOption.value.year + '/' + filterOption.value.type).then((res) => {
        await http.get('/large/querySzCumThrMonthRecordByYear/' + filterOption.value.year + '/' + filterOption.value.type + '/' + '\'南山港区\',\'蛇口集装箱码头有限公司\',\'赤湾集装箱码头有限公司\',\'招商港务（深圳）公司\'').then((res) => {
            let isValid = res && res.data && res.data.data && res.data.data.length >= 0;
            dbData.value = isValid ? res.data.data : [];
        });
    }
    const querySzCumThrData = async () => {
        await http.get('/large/querySzCumThrMonthRecordByYear/' + filterOption.value.year + '/' + filterOption.value.type + '/' + '\'全港合计\',\'南山港区\',\'盐田国际集装箱码头有限公司\',\'深圳大铲湾现代港口发展有限公司\'').then((res) => {
            let isValid = res && res.data && res.data.data && res.data.data.length >= 0;
            dbData.value = isValid ? res.data.data : [];
        });
    }
    const querySgCumThrData = async () => {
        await http.get('/large/querySzCumThrMonthRecordByYear/' + filterOption.value.year + '/' + filterOption.value.type + '/' + '\'南山港区\',\'蛇口集装箱码头有限公司\',\'赤湾集装箱码头有限公司\',\'招商港务（深圳）公司\'').then((res) => {
            let isValid = res && res.data && res.data.data && res.data.data.length >= 0;
            dbData.value = isValid ? res.data.data : [];
        });
    }
    const queryRankingPortCumThrData = async (portName) => {
        await http.get('/large/querySzRankingCumThrMonthRecordByYear/' + filterOption.value.year + '/' + filterOption.value.type + '/' + portName).then((res) => {
            let isValid = res && res.data && res.data.data && res.data.data.length >= 0;
            dbData.value = isValid ? res.data.data : [];
        });
    }

    const szDict = {
        '累计合计': 'parentCum',
        '本月合计': 'parent',
        '累计重箱': 'parentCumLoaded',
        '本月重箱': 'parentLoaded',
        '累计空箱': 'parentCumEmpty',
        '本月空箱': 'parentEmpty',
        '累计进口': 'parentCumIn',
        '本月进口': 'parentIn',
        '累计出口': 'parentCumOut',
        '本月出口': 'parentOut',
        '累计外贸出口': 'parentCumFreOut',
        '本月外贸出口': 'parentFreOut',
    }

    const nsDict = {
        '累计': 'Cum',
        '本月': '',
    }

    const setMyChartOption = async () => {
        let preType = type.split('-')[0]
        if (preType === 'sz') {
            await querySzCumThrData()

            let qg = dbData.value.filter(item => item.portNameCn === '全港合计');
            let ns = dbData.value.filter(item => item.portNameCn === '南山港区');
            let yt = dbData.value.filter(item => item.portNameCn === '盐田国际集装箱码头有限公司');
            let dcw = dbData.value.filter(item => item.portNameCn === '深圳大铲湾现代港口发展有限公司');
            option.value = {
                titleText: '深圳港' + filterOption.value.filter + '集装箱吞吐量',
                // subText: '占比峰值出现在6月',
                // legendData: ['合计', '外贸出口', '重箱', '空箱', '进口', '出口'],
                legendData: ['深圳', '南山', '盐田', '大铲湾', '全港增速', '南山增速', '盐田增速', '大铲湾增速'],
                xAxisData: dbData.value.filter(item => item.portNameCn === '全港合计').map(item => getXLabel(filterOption.value.type, item)),
                yAxisName: ['吞吐量(万TEU)', '增速/占比'],
                seriesType: ['bar', 'bar', 'bar', 'bar', 'line', 'line', 'line', 'line'],
                yAxisIndex: [0, 0, 0, 0, 1, 1, 1, 1],
                itemStyle: [
                    echartsUtil.getLinearGradient(0, 0, 0, 1, '#198BFC', '#33EEFF'),
                    echartsUtil.getLinearGradient(0, 0, 0, 1, '#C8B238', '#FFE34D'),
                    echartsUtil.getLinearGradient(0, 0, 0, 1, '#578804', '#baf318'),
                    echartsUtil.getLinearGradient(0, 0, 0, 1, '#7e6c08', '#e1d074'),
                    {normal: {color: '#33EEFFFF'}},
                    {normal: {color: '#FFE34DFF'}},
                    {normal: {color: '#BAF318FF'}},
                    {normal: {color: '#E1D074FF'}},
                ],
                seriesData: [
                    qg.map(item => NumberUtil.toFixed(item[szDict[filterOption.value.statsType+filterOption.value.filter] + 'Thr']/10000, 2)),
                    ns.map(item => NumberUtil.toFixed(item[szDict[filterOption.value.statsType+filterOption.value.filter] + 'Thr']/10000, 2)),
                    yt.map(item => NumberUtil.toFixed(item[szDict[filterOption.value.statsType+filterOption.value.filter] + 'Thr']/10000, 2)),
                    dcw.map(item => NumberUtil.toFixed(item[szDict[filterOption.value.statsType+filterOption.value.filter] + 'Thr']/10000, 2)),
                    qg.map(item => NumberUtil.toFixed(item[szDict[filterOption.value.statsType+filterOption.value.filter] + 'Growth'], 2)),
                    ns.map(item => NumberUtil.toFixed(item[szDict[filterOption.value.statsType+filterOption.value.filter] + 'Growth'], 2)),
                    yt.map(item => NumberUtil.toFixed(item[szDict[filterOption.value.statsType+filterOption.value.filter] + 'Growth'], 2)),
                    dcw.map(item => NumberUtil.toFixed(item[szDict[filterOption.value.statsType+filterOption.value.filter] + 'Growth'], 2)),
                ]
            }
        } else if (preType === 'sg') {
            await querySgCumThrData()

            let ns = dbData.value.filter(item => item.portNameCn === '南山港区');
            let sk = dbData.value.filter(item => item.portNameCn === '蛇口集装箱码头有限公司');
            let cw = dbData.value.filter(item => item.portNameCn === '赤湾集装箱码头有限公司');
            let zs = dbData.value.filter(item => item.portNameCn === '招商港务（深圳）公司');
            option.value = {
                titleText: '南山港区' + filterOption.value.filter + '集装箱吞吐量',
                // subText: '占比峰值出现在6月',
                // legendData: ['合计', '外贸出口', '重箱', '空箱', '进口', '出口'],
                legendData: ['南山', '蛇口', '赤湾', '招商', '南山增速', '蛇口增速', '赤湾增速', '招商增速'],
                xAxisData: dbData.value.filter(item => item.portNameCn === '南山港区').map(item => getXLabel(filterOption.value.type, item)),
                yAxisName: ['吞吐量(万TEU)', '增速/占比'],
                seriesType: ['bar', 'bar', 'bar', 'bar', 'line', 'line', 'line', 'line'],
                yAxisIndex: [0, 0, 0, 0, 1, 1, 1, 1],
                itemStyle: [
                    echartsUtil.getLinearGradient(0, 0, 0, 1, '#198BFC', '#33EEFF'),
                    echartsUtil.getLinearGradient(0, 0, 0, 1, '#C8B238', '#FFE34D'),
                    echartsUtil.getLinearGradient(0, 0, 0, 1, '#578804', '#baf318'),
                    echartsUtil.getLinearGradient(0, 0, 0, 1, '#7e6c08', '#e1d074'),
                    {normal: {color: '#33EEFFFF'}},
                    {normal: {color: '#FFE34DFF'}},
                    {normal: {color: '#BAF318FF'}},
                    {normal: {color: '#E1D074FF'}},
                ],
                seriesData: [
                    ns.map(item => NumberUtil.toFixed(item[szDict[filterOption.value.statsType+filterOption.value.filter] + 'Thr']/10000, 2)),
                    sk.map(item => NumberUtil.toFixed(item[szDict[filterOption.value.statsType+filterOption.value.filter] + 'Thr']/10000, 2)),
                    cw.map(item => NumberUtil.toFixed(item[szDict[filterOption.value.statsType+filterOption.value.filter] + 'Thr']/10000, 2)),
                    zs.map(item => NumberUtil.toFixed(item[szDict[filterOption.value.statsType+filterOption.value.filter] + 'Thr']/10000, 2)),
                    ns.map(item => NumberUtil.toFixed(item[szDict[filterOption.value.statsType+filterOption.value.filter] + 'Growth'], 2)),
                    sk.map(item => NumberUtil.toFixed(item[szDict[filterOption.value.statsType+filterOption.value.filter] + 'Growth'], 2)),
                    cw.map(item => NumberUtil.toFixed(item[szDict[filterOption.value.statsType+filterOption.value.filter] + 'Growth'], 2)),
                    zs.map(item => NumberUtil.toFixed(item[szDict[filterOption.value.statsType+filterOption.value.filter] + 'Growth'], 2)),
                ]
            }
        } else if (preType === 'ns') {
            await queryNsCumThrData()

            let ns = dbData.value.filter(item => item.portNameCn === '南山港区');
            let sk = dbData.value.filter(item => item.portNameCn === '蛇口集装箱码头有限公司');
            let cw = dbData.value.filter(item => item.portNameCn === '赤湾集装箱码头有限公司');
            let zs = dbData.value.filter(item => item.portNameCn === '招商港务（深圳）公司');

            option.value = {
                titleText: '南山港当年月集装箱吞吐量',
                // subText: '占比峰值出现在6月',
                // legendData: ['南山', '蛇口', '赤湾', '招商', '南山增速', '蛇口增速', '赤湾增速', '招商增速', '南山占比'],
                legendData: ['南山', '蛇口', '赤湾', '招商', '南山增速', '蛇口增速', '赤湾增速', '招商增速'],
                xAxisData: ns.map(item => getXLabel(filterOption.value.type, item)),
                yAxisName: ['吞吐量(万TEU)', '增速/占比'],
                seriesType: ['bar', 'bar', 'bar', 'bar', 'line', 'line', 'line', 'line', 'line'],
                yAxisIndex: [0, 0, 0, 0, 1, 1, 1, 1, 1],
                itemStyle: [
                    echartsUtil.getLinearGradient(0, 0, 0, 1, '#198BFC', '#33EEFF'),
                    echartsUtil.getLinearGradient(0, 0, 0, 1, '#C8B238', '#FFE34D'),
                    echartsUtil.getLinearGradient(0, 0, 0, 1, '#578804', '#baf318'),
                    echartsUtil.getLinearGradient(0, 0, 0, 1, '#7e6c08', '#e1d074'),
                    {normal: {color: '#33EEFFFF'}},
                    {normal: {color: '#FFE34DFF'}},
                    {normal: {color: '#BAF318FF'}},
                    {normal: {color: '#E1D074FF'}},
                    {normal: {color: '#fd003a'}},
                ],
                seriesData: [
                    ns.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.value.statsType] + 'Thr']/10000, 2)),
                    sk.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.value.statsType] + 'Thr']/10000, 2)),
                    cw.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.value.statsType] + 'Thr']/10000, 2)),
                    zs.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.value.statsType] + 'Thr']/10000, 2)),
                    ns.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.value.statsType] + 'Growth'], 2)),
                    sk.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.value.statsType] + 'Growth'], 2)),
                    cw.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.value.statsType] + 'Growth'], 2)),
                    zs.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.value.statsType] + 'Growth'], 2)),
                    ns.map(item => NumberUtil.toFixed(item['parent' + nsDict[filterOption.value.statsType] + 'Growth'], 2)),
                ]
            }
        } else {
            let portName = '';
            let split = type.split('-');
            if (split.length > 1) {
                portName = split[1];
            }
            await queryRankingPortCumThrData(portName)

            if (filterOption.value.type === 'year') {
                setRankingYearOptionValue(portName)
            } else if (filterOption.value.type === 'quarter') {
                setRankingQuarterOptionValue(portName)
            } else {
                setRankingMonthOptionValue(portName)
            }
        }

        let seriesArray = [];
        option.value.legendData.forEach((item, index) => {
            seriesArray.push({
                name: item,
                yAxisIndex: option.value.yAxisIndex[index],
                type: option.value.seriesType[index],
                data: option.value.seriesData[index],
                itemStyle: option.value.itemStyle[index]
            })
        })

        myChartOption.value = {
            backgroundColor: 'rgba(11,32,53,0)',
            textStyle: {
                color: '#FFFFFF',
                opacity: 0.85
            },
            title: {
                // text: '世界港口集装箱吞吐量排名',
                text: option.value.titleText,
                textStyle: {
                    color: '#38E5DE',
                    fontSize: '26px',
                    opacity: 1
                },
                subtext: option.value.subText,
                subtextStyle: {
                    color: '#ff6666',
                    fontSize: '16px',
                    opacity: 1
                }
                // subtext: '数据来自网络'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                },
                textStyle: {
                    fontSize: 16
                }
            },
            legend: {
                show: true,
                data: option.value.legendData,
                top: 'bottom',
                itemWidth: 20,
                textStyle: {
                    fontSize: 16,
                    color: '#FFFFFF',
                    opacity: 0.85
                }
            },
            grid: {
                left: '5%',
                right: '5%',
                bottom: '8%',
                top: '100',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: option.value.xAxisData,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        interval: 0
                    }
                },
            ],
            yAxis: [
                {
                    type: 'value',
                    name: option.value.yAxisName[0],
                    axisLabel: {
                        formatter: '{value}'
                    },
                    nameTextStyle: {
                        align: "center",
                        fontSize: 16
                    }
                },
                {
                    type: 'value',
                    name: option.value.yAxisName[1],
                    position: 'right',
                    axisLabel: {
                        formatter: '{value} %'
                    },
                    axisPointer: {
                        type: "line"
                    },
                    nameTextStyle: {
                        fontSize: 16
                    }
                }
            ],
            dataZoom: [{
                type: "inside"
            }],
            series: seriesArray
        };

        debugger
        let myChartInstance = echartsUtil.initMyChart(myChart.value)

        myChartInstance.on('click', function (params) {
            let name = params.seriesName;
            if (name === '南山') {
                window.AC.SetWindowVisible([{id: 6,visible: false}]);
                window.AC.ShowCustomWindow('middle-sz-sg', 'http://localhost:8080/#/conta-middle-home/sg' + (filterOption.value.filter ? '-' + filterOption.value.filter : ''), 1200, 800, 360, 113, true, {
                    draggable: false,
                    resize: false,
                    callbackFn: function (data) {
                        console.log('ShowWindow:' + JSON.stringify(data));
                    },
                });
            }
        });

        myChartInstance.setOption(myChartOption.value, true);
    }

    watch(filterOption, setMyChartOption);

    return {
        myChartOption,
        setMyChartOption
    }
}
// let some = option.value.seriesData[option.value.seriesData.length - 1].some(item => item < 0);
// let lineStyle = some ? {
//     color: "rgba(255, 0, 0, 1)",
//     width: 3
// } : {};

// {
//     type: 'category',
//     axisPointer: {
//         type: 'shadow'
//     },
//     axisLine: {
//         lineStyle: lineStyle,
//         z: 2
//     }
// }

// title: {
//     // text: '世界港口集装箱吞吐量排名',
//     // text: option.value.titleText,
//     textStyle: {
//         color: '#FFFFFF',
//         fontSize: '26px',
//         opacity: 1
//     },
//     subtext: option.value.subText,
//     subtextStyle: {
//         color: '#ff6666',
//         fontSize: '16px',
//         opacity: 1
//     }
//     // subtext: '数据来自网络'
// },